<div class="row m-n">
    <div class="crumbs-bar">
        <div yb-crumbs></div>
    </div>
    <div tabset type="tab">
        <div tab heading="供货商分类" active="activeFlag[0]" ng-click="changeTab(0)">
            <div class="row wrapper-y-sm">
                <div class="operate-bar col-xs-4 font-0">
                    <button class="btn btn-operate m-r-sm" ng-click="addSubNode(root)"
                            ng-disabled="!btnPermission.supplierClassAdd"
                            translate translate-attr-title="{{!btnPermission.supplierClassAdd?'无权限执行此操作':''}}">新增</button>
                </div>
            </div>
            <div class="main-area">
                <div yb-table-fixed class="table-fixed-wrap">
                    <div class="th-scroll-x">
                        <table class="table border-none">
                            <thead>
                            <tr>
                                <th width="40%" translate>供货商分类</th>
                                <th width="30%" translate>分类编码</th>
                                <th width="30%" translate>操作</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="td-scroll" ng-show="root.children.length > 0">
                        <table class="table border-none">
                            <tbody ng-repeat="parentDepart in root.children track by $index" class="border-none">
                            <tr>
                                <td width="40%" class="spill-dots" title="{{parentDepart.className}}">
                                    <i ng-if="parentDepart.isParent" class="yb-icon m-r-xs cursor-pointer"
                                       ng-class="{'ico-minus-square-o':parentDepart.isExpand, 'ico-plus-square-o':!parentDepart.isExpand}"
                                       ng-click="parentDepart.isExpand = !parentDepart.isExpand;getChildData(parentDepart)"></i>
                                    {{parentDepart.className}}
                                </td>
                                <td width="30%" class="spill-dots" title="{{parentDepart.classCode}}">{{parentDepart.classCode}}</td>
                                <td width="30%" class="font-0">
                                    <button class="btn btn-operate m-r-xs" ng-click="editData(parentDepart,root)"
                                            ng-disabled="!btnPermission.supplierClassEdit"
                                            translate translate-attr-title="{{!btnPermission.supplierClassEdit?'无权限执行此操作':''}}">编辑</button>
                                    <button class="btn btn-operate m-r-xs" ng-click="delData( root, $index)"
                                            ng-disabled="!btnPermission.supplierClassDel"
                                            translate translate-attr-title="{{!btnPermission.supplierClassDel?'无权限执行此操作':''}}">删除</button>
                                    <button class="btn btn-operate" ng-click="addSubNode(parentDepart)"
                                            ng-disabled="!btnPermission.supplierClassAdd"
                                            translate translate-attr-title="{{!btnPermission.supplierClassAdd?'无权限执行此操作':''}}">添加下级</button>
                                </td>
                            </tr>
                            <tr ng-repeat-start="childDepart in parentDepart.children track by $index" ng-if="parentDepart.isExpand">
                                <td class="spill-dots p-l-xl" title="{{childDepart.className}}">
                                    <i ng-if="childDepart.isParent" class="yb-icon m-r-xs cursor-pointer"
                                       ng-class="{'ico-minus-square-o':childDepart.isExpand, 'ico-plus-square-o':!childDepart.isExpand}"
                                       ng-click="childDepart.isExpand = !childDepart.isExpand;getChildData(childDepart)"></i>
                                    {{childDepart.className}}
                                </td>
                                <td class="spill-dots" title="{{childDepart.classCode}}">{{childDepart.classCode}}</td>
                                <td class="font-0">
                                    <button class="btn btn-operate m-r-xs" ng-click="editData(childDepart,parentDepart)"
                                            ng-disabled="!btnPermission.supplierClassEdit"
                                            translate translate-attr-title="{{!btnPermission.supplierClassEdit?'无权限执行此操作':''}}">编辑</button>
                                    <button class="btn btn-operate m-r-xs" ng-click="delData(parentDepart, $index)"
                                            ng-disabled="!btnPermission.supplierClassDel"
                                            translate translate-attr-title="{{!btnPermission.supplierClassDel?'无权限执行此操作':''}}">删除</button>
                                    <button class="btn btn-operate" ng-click="addSubNode(childDepart)"
                                            ng-disabled="!btnPermission.supplierClassAdd"
                                            translate translate-attr-title="{{!btnPermission.supplierClassAdd?'无权限执行此操作':''}}">添加下级</button>
                                </td>
                            </tr>
                            <tr ng-repeat-end ng-repeat="sonDepart in childDepart.children track by $index"
                                ng-if="childDepart.isExpand && parentDepart.isExpand" >
                                <td class="spill-dots p-l-xxxl" title="{{sonDepart.className}}">
                                    {{sonDepart.className}}
                                </td>
                                <td class="spill-dots" title="{{sonDepart.classCode}}">{{sonDepart.classCode}}</td>
                                <td class="font-0">
                                    <button class="btn btn-operate m-r-xs" ng-click="editData(sonDepart,childDepart)"
                                            ng-disabled="!btnPermission.supplierClassEdit"
                                            translate translate-attr-title="{{!btnPermission.supplierClassEdit?'无权限执行此操作':''}}">编辑</button>
                                    <button class="btn btn-operate" ng-click="delData(childDepart, $index)"
                                            ng-disabled="!btnPermission.supplierClassDel"
                                            translate translate-attr-title="{{!btnPermission.supplierClassDel?'无权限执行此操作':''}}">删除</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="no-data w-full text-center p-t" ng-show="root.children.length === 0" translate>暂时没有数据</div>
                </div>
            </div>
        </div>
        <div tab heading="{{tabFlag.name}}" active="activeFlag[1]" ng-if="activeFlag[1]">
            <div class="main-area d-t-35 d-b-60">
                <form name="form" class="main-wrap form-horizontal single-col p-t clearfix" novalidate>
                    <div class="form-group" ng-if="detailInfo.parentNodeName !== ''">
                        <label class="col-xs-2 control-label"><span translate>上级分类</span>：</label>
                        <div class="col-xs-5 wrapper-none">
                            <div class="txt-show p-t-xs">{{detailInfo.parentNodeName}}</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-2 control-label"><i>*</i><span translate>分类名称</span>：</label>
                        <div class="col-xs-5 wrapper-none">
                            <input type="text" name="name" class="form-control" ng-model="detailInfo.className" required yb-focus maxlength="20">
                        </div>
                        <div class="col-xs-4 msg-block" ng-show="form.name.$dirty || (form.name.$invalid && submitted)">
                            <div class="error-msg" ng-if="form.name.$error.required && !form.name.focused">
                                <i class="yb-icon ico-times-circular"></i><span translate>必填项，请填写</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-2 control-label"><span translate>分类编号</span>：</label>
                        <div class="col-xs-5 wrapper-none">
                            <input type="text" name="code" class="form-control" ng-model="detailInfo.classCode" maxlength="20">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-2 control-label"></label>
                        <div class="col-xs-5 wrapper-none">
                            <button type="button" class="btn btn-primary m-r-sm" ng-click="saveData(form.$valid)" translate>保存</button>
                            <button type="button" class="btn btn-default" ng-click="changeTab(0)" translate>取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>